<template>
  <view class="body">
    <up-tabs :list="tabsList" @click="tabsClick"></up-tabs>
    <view class="emoji">
      <u-grid :border="false" col="8">
        <u-grid-item v-for="(item, index) in emojiList" :key="index" @click="emojiClick(item.emoji)">
          <view style="font-size: 25px">{{ item.emoji}}</view>
        </u-grid-item>
      </u-grid>
    </view>
    <view class="floating-button" @click="deleteClick">
      <up-icon name="trash" size="20px"></up-icon>
    </view>

  </view>
</template>

<script setup lang="ts">
import emojiData from 'unicode-emoji-json/data-by-group.json';
const emits = defineEmits(['callBackAdd','callBackDel']);



const tabsList = computed(() => {
  return  emojiData.map((item,index) => {
    let name='';
    switch (item.name) {
      case 'Smileys & Emotion':
        name='表情'
        break;
      case 'People & Body':
        name='人物'
        break;
      case 'Animals & Nature':
        name='动物'
        break;
      case 'Food & Drink':
        name='食物'
        break;
      case 'Travel & Places':
        name='旅行'
        break;
      case 'Activities':
        name='活动'
        break;
      case 'Objects':
        name='物体'
        break;
      case 'Symbols':
        name='符号'
        break;
      case 'Flags':
        name='旗帜'
        break;
    }


    return { name: name,index }
  })
});


const emojiList =ref(emojiData[0].emojis) ;
const tabsClick = (item: any) => {
  emojiList.value=emojiData[item.index].emojis;
}

const emojiClick = (name:string) => {
  emits('callBackAdd', name);
}
const deleteClick = () => {
  emits('callBackDel');
}
</script>


<style scoped lang="scss">
  .body{
    position: relative;
    max-height: 45vh;
    .emoji{
      max-height: 40vh;
      overflow-y: auto;
    }
    .floating-button {
    position: fixed;
    bottom: 20px;
    right: 10px;
    background-color: #ffffff;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
  }
  }
</style>
